<template>
  <view class="gpp-datePicker" @click.stop="show">
    <slot />
    <view
      class="g-dp-mask"
      :class="{ 'show': pipkerShowFlag }"
      @click.stop="hide"
      @touchmove.stop.prevent
      catchtouchmove="true"
    ></view>
    <view
      class="g-dp-content"
      :class="{ 'show': pipkerShowFlag }"
      :style="{ paddingBottom: isIos ? '64rpx' : '0' }"
      @touchmove.stop.prevent
      catchtouchmove="true"
    >
      <view class="g-dp-ctt-wrapper">
        <picker-view
          :value="defaultValue"
          indicator-style="height: 80rpx;font-size: 38rpx"
          @change="bindChange"
        >
          <!-- 省 -->
          <picker-view-column class="pvc">
            <block v-for="(item, index) in provinces" :key="index">
              <view style="text-align: center">{{ item.areaName }}</view>
            </block>
          </picker-view-column>
          <!--  市 -->
          <picker-view-column class="pvc">
            <block v-for="(item, index) in cities" :key="index">
              <view style="text-align: center">{{ item.areaName }}</view>
            </block>
          </picker-view-column>
          <!--  区 -->
          <picker-view-column class="pvc" v-if="showArea">
            <block v-for="(item, index) in areas" :key="index">
              <view style="text-align: center">{{ item.areaName }}</view>
            </block>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="picker-btn-box">
        <view class="picker-btn">
          <view class="btn-cancel" @click.stop="cancelPicker">取消</view>
          <view class="btn-confirm" @click.stop="onAddressPick">确定</view>
        </view>
      </view>
      <view class="ios_safe_zone_line" style="z-index: 2" v-if="isIos"></view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>
<script>
import api from "@/api/api";
export default {
  data() {
    return {
      provinces: [], //获取到的所有的省
      cities: [], //选择的该省的所有市
      areas: [], //选择的该市的所有区县
      defaultValue: [0, 0, 0],
      selectedRegion: [0, 0, 0],
      animationData: {},
      province_code: "110000000", //默认省份id
      city_code: "110100000", //默认城市id
      province: "",
      city: "",
      provinceCode: "",
      cityCode: "",
      provinceName: "",
      cityName: "",
      pipkerShowFlag: false,
    };
  },
  props: {
    showArea: {
      type: Boolean,
      default: true,
    },
    isIos: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  methods: {
		/**
		 * 展示弱提示
		 * @param {Object} msg 文案
		 */
		handleShowTextToast(msg){
			try{
				this.$refs.toastPopup.showToast(msg);
			}catch(e){}
		},
		/**
		 * 若提示按钮点击回调
		 * @param {Object} data.type 类型：confirm确定，cancel取消
		 * @param {Object} data.callBackData 呼气弹窗时传入的数据
		 */
		onToastPopupClick(data){},
    show() {
      this.pipkerShowFlag = true;
    },
    hide() {
      this.pipkerShowFlag = false;
    },
    setAddressPickerValue(province, city, area) {
      this.province = province;
      this.city = city;
      this.area = area;
    },
    showPicker() {
      const fadeAnim = uni.createAnimation({
        duration: 500,
        timingFunction: "ease",
      });
      this.fadeAnim = fadeAnim;
      const showAnim = uni.createAnimation({
        duration: 500,
        timingFunction: "ease",
      });
      this.showAnim = showAnim;
      fadeAnim.backgroundColor("#000").opacity(0.5).step();
      showAnim.bottom(0 + "rpx").step();
      this.animationData = {
        fadeAnim: fadeAnim.export(),
        showAnim: showAnim.export(),
      };
    },
    hidePicker() {
      this.pipkerShowFlag = false;
      // this.fadeAnim.backgroundColor("#fff").opacity(0).step();
      // this.showAnim.bottom(-600 + "rpx").step();
      // this.animationData = {
      //   fadeAnim: this.fadeAnim.export(),
      //   showAnim: this.showAnim.export(),
      // };
    },
    //点击事件，点击弹出选择页
    openAddressPicker() {
      let that = this;
      this.pipkerShowFlag = true;
      // this.initAddressPicker();
      this.defaultValue = [0, 0, 0];
      this.selectedRegion = [0, 0, 0];
      this.showPicker();
      this.loadProivnce();
    },
    //取消按钮
    cancelPicker() {
      //这里也是动画，然其高度变为0
      this.hide();
    },
    //确认按钮
    onAddressPick(e) {
      let that = this;
      const [provinceIndex, cityIndex, areaIndex] = this.selectedRegion;
      const { provinces, cities, areas } = this;
      this.province = provinces[provinceIndex];
      this.city = cities[cityIndex];
      this.area = areas[areaIndex] || {};
      if (
        this.area.parentCode == this.city?.areaCode &&
        this.city?.parentCode == this.province?.areaCode
      ) {
        //一样是动画，级联选择页消失，效果和取消一样
        this.hide();
        this.$emit("areaArray", this.province, this.city, this.area);
      } else {
        return false;
      }
    },
    //滚动选择的时候触发事件
    bindChange(e) {
      //这里是获取picker-view内的picker-view-column 当前选择的是第几项
      const _this = this;
      let e_value = e.detail.value;
      let provinceNum = e_value[0];
      let cityNum = e_value[1];
      let areaNum = e_value[2];
      //省变化，市区分别选中第一个
      if (this.selectedRegion[0] !== e_value[0]) {
        _this.selectedRegion = [e_value[0], 0, 0];
        _this.loadCity(_this.provinces[e_value[0]]?.areaCode);
        //市变化，区选中第一个
      } else if (this.selectedRegion[1] !== e_value[1]) {
        this.selectedRegion = [e_value[0], e_value[1], 0];
        _this.loadArea(_this.cities[e_value[1]]?.areaCode);
      } else if (this.selectedRegion[2] !== e_value[2]) {
        //区变化，省市不变
        this.selectedRegion = e_value;
      }
      this.defaultValue = this.selectedRegion;
    },
    // 点击初始化加载省市区列表
    loadProivnce: async function () {
      let that = this;
      // 获取所有省份
      const json = await api.getProvinceList();
      if (json.code === 1000) {
        that.provinces = json.data.content;
        //根据默认省，获取默认市
        const json1 = await api.getCityList(that.province_code);
        if (json1.code === 1000) {
          that.cities = json1.data.content;
          //根据默认市，获取默认区
          that.loadArea(that.cities[0]?.areaCode);
        }
      }
    },

    // 加载城市和区域信息
    loadCity: async function (city_code) {
      const that = this;
      const city_json = await api.getCityList(city_code);
      if (city_json.code === 1000) {
        that.cities = city_json.data.content;
        //请求区域信息
        const area_json = await api.getAreaList(
          city_json.data.content[0]?.areaCode
        );
     

        let testParams = {
          query: {
            area_no: "1",
            area_type: "town",
            parent_code: "350102000",
            sort_type: "zh",
          },
        };
        const street_json = await api.getAreasListNew(testParams);
   
        if (area_json.code === 1000) {
          that.areas = area_json.data.content;
        } else {
          that.handleShowTextToast(area_json.msg);
        }
      } else {
        that.handleShowTextToast(city_json.msg);
      }
    },
    // 加载区域信息
    loadArea: async function (state_code) {
      const that = this;
      const json = await api.getAreaList(state_code);
      if (json.code === 1000) {
        that.areas = json.data.content;
      } else {
        that.handleShowTextToast(json.msg);
      }
    },
  },
};
</script>
<style lang="less">
.cascade_box {
  font-size: 32rpx;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99999;
}

.cascade_hei {
  width: 100%;
  height: 100vh;
  background: #fff;
  opacity: 0;
}

.cascade_find {
  width: 100%;
  height: 600rpx;
  position: fixed;
  bottom: -600rpx;
  left: 0;
  background: #fff;
  z-index: 99999;
}

.quxiao,
.queren {
  display: block;
  position: absolute;
  width: 100rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #0cbb0a;
}

.quxiao {
  color: #939393;
}

.queren {
  right: 0;
  top: 0;
}

.pvc {
  font-size: 38rpx;
}

.cascade_header {
  height: 80rpx;
  width: 100%;
  margin-bottom: 20rpx;
}

picker-view picker-view-column view {
  line-height: 38px;
}

.picker-btn-box {
  height: 228rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffff;

  .picker-btn {
    width: 596rpx;
    height: 88rpx;
    display: flex;
    justify-content: space-between;
  }

  .btn-cancel,
  .btn-confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 282rpx;
    height: 88rpx;
    font-size: 36rpx;
    font-weight: 500;
    border-radius: 8rpx;
    font-family: NotoSansSC-Medium;
  }

  .btn-confirm {
    background: #3b8749;
    color: #ffffff;
  }

  .btn-cancel {
    background: #f2f2f2;
    color: #3b8749;
  }
}

.g-dp-content {
  position: fixed;
  z-index: 1001;
  bottom: 0;
  right: 0;
  width: 100%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  border-radius: 55rpx 93rpx 0 0 !important;

  .g-dp-ctt-head {
    height: 88upx;
    background-color: #ffffff;
    padding: 0 40upx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .g-dp-ctt-hd-btn {
      color: #888;
      font-size: 17px;
    }
  }

  .g-dp-ctt-wrapper {
    // height: 480upx;
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
    background-color: #ffffff;

    .g-dp-ctt-wp-item {
      text-align: center;
      width: 100%;
      height: 88upx;
      line-height: 88upx;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 30upx;
    }
  }
  picker-view-column {
    height: 480rpx !important;
  }
}

.gpp-datePicker {
  position: relative;
  z-index: 999;
  border-radius: 55rpx 93rpx 0 0 !important;

  .g-dp-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
  }
  .g-dp-mask.show {
    visibility: visible;
    opacity: 1;
  }
}

.g-dp-content.show {
  transform: translateY(0);
}
</style>
